<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <script src="../js/layui/layui.js"></script>
    <link rel="stylesheet" href="../js/layui/css/layui.css">

</head>
<body>
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">岗位名称：</label>
                <div class="layui-input-inline">
                    <input class="layui-input" id="name" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">发布时间：</label>
                <div class="layui-input-inline">
                    <input class="layui-input" id="startPrice" autocomplete="off">
                </div>
            </div>
            <!--间隔符号-->
            --&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input class="layui-input" id="endPrice" autocomplete="off">
                </div>
            </div>
        </div>
        <!--类型-->
        <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">书籍类型：</label>
                    <div class="layui-input-inline">
                        <select id="type">

                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" data-type="reload" onclick="searchs()">搜索</button>
                </div>
        </div>
    </div>
    <div>
        <font size="3px"><span class="title">学历要求：</span></font>
        <input type="radio" name="xueli" onclick="xueli(1)"><font size="3px">大专</font>&nbsp;&nbsp;&nbsp;
        <input type="radio" name="xueli" onclick="xueli(2)"><font size="3px">本科</font>&nbsp;&nbsp;&nbsp;
        <input type="radio" name="xueli" onclick="xueli(3)"><font size="3px">硕士</font>&nbsp;&nbsp;&nbsp;
        <input type="radio" name="xueli" onclick="xueli(4)"><font size="3px">博士</font>&nbsp;&nbsp;&nbsp;
    </div>
    <div class="layui-inline">
        <button class="layui-btn" data-type="reload" onclick="qingkong()">清空</button>
    </div>

    <!--列表展示-->
    <table class="layui-hide" id="BookTable" lay-filter="productFilter"></table>

</body>
<script>
    /*列表展示*/
    var table;
    var form;
    var $;
    layui.use(['table','form'], function(){
        table = layui.table;
        form=layui.form;
        $=layui.jquery;
        table.render({
            id:'productTableId'
            ,elem: '#BookTable'
            ,url:'../web/queryList'
            ,limit:4
            ,limits:[2,4,6,8,10]
            ,page:true
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [
                [
                    {field:'id', width:'10%', title: 'ID', checkbox: true}
                    ,{field:'title', width:'20%', title: '岗位名称'}
                    ,{field:'fabudate', width:'10%', title: '发布时间'}
                    ,{field:'xinzi', width:'10%', title: '薪资'}
                    ,{field:'comid', width:'10%', title: '公司'}
                    ,{field:'yaoqiu', width:'10%', title: '学历要求'}
                ]
            ]
        });
        /*为了能一打开页面就去后台查询  类似页面加载*/
        $(function () {
            initType();
        })
    });


    /*类型查询*/
    function initType() {
        $.ajax({
            url:'../test/queryType',
            data:{},
            type:'post',
            dataType:'json',
            success:function (data) {
                var html="<option value='0'>请选择</option>";
                for (var i = 0; i < data.length; i++) {
                    html+="<option value='"+data[i].comid+"'>"+data[i].comName+"</option>";
                }
                $("#type").append(html);
                layui.form.render("select");
            }
        })
    }


    //学历
    var yaoqiu =  "";
    function xueli(i) {
        //大专
        if (i == 1){
            yaoqiu = "大专";
        }
        //本科
        if (i == 2){
            yaoqiu = "本科";
        }
        //硕士
        if (i == 3){
            yaoqiu = "硕士";
        }
        //博士
        if (i == 4){
            yaoqiu  = "博士";
        }
        searchs(yaoqiu);
    }

    /*条件查询*/
    function searchs(yaoqiu){
        table.reload("productTableId",{
            where: { //设定异步数据接口的额外参数，任意设
                title: $("#name").val(),//这里获取input的值
                startTime:$("#startPrice").val(),
                endTime:$("#endPrice").val(),
                comId:$("#type").val(),
                yaoqiu:yaoqiu,
            }
            ,page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }
    /*清空*/
    function qingkong() {
        location.href=location;
    }
</script>
</html>